<template>
	<view>
		<!-- 置顶 -->
		<view class="prefer-posi">
			<!-- 筛选区 -->
			<view class="delica-view">
				<view class="delica-list delica-grow" @click="multiple()">
					<text>{{synthesize}}</text>
					<image src="../../../static/delica1.png" mode="widthFix"></image>
				</view>
				<view class="delica-grow" @click="saLes()">销量高</view>
				<view class="delica-grow" @click="saLes()">速度快</view>
				<view class="delica-grow" @click="saLes()">津贴联盟</view>
				<view class="delica-list delica-right" @click="scReen()">
					<text>筛选</text>
					<image src="../../../static/delica2.png" mode="widthFix"></image>
				</view>
			</view>
			<!-- 综合排序筛选 -->
			<view class="sortlist sortliteltle" v-if="drop">
					<block v-for="(item,index) in sortlist" :key="index">
						<text :class="{activeb:index==num}" @click="sortClick(index,item.name,item.screen,item.nums)">{{item.name}}</text>
					</block>
			</view>
			
			<!-- 多个筛选 -->
			<view class="sortlist sortlist-view" v-if="sortmen">
				<!-- 多选 商家特色-->
				<block v-for="(item,index) in screendata" :key="index">
					<view>
						<view class="sortlist-title">
							{{item.title}}
						</view>
						<view class="sortlist-flex">
							<block v-for="(itemdata,indexs) in item.datas" :key="indexs">
								<text class="Choice" :class="{scractive:itemdata.id==2}" @click="screenChoIce(indexs,itemdata.sign)">{{itemdata.name}}</text>
							</block>
						</view>
					</view>
				</block>	
				<!-- 单选 人均价-->
				<block v-for="(item,index) in person" :key="index">
					<view>
						<view class="sortlist-title">
							{{item.title}}
						</view>
						<view class="sortlist-flex">
							<block v-for="(itemdata,indexs) in item.datas" :key="indexs">
								<text class="Choice" :class="{scractive:indexs==scrnum}" @click="personchoIce(indexs,itemdata.per)">{{itemdata.name}}</text>
							</block>
						</view>
					</view>
				</block>
				<!-- 置顶 -->
				<view class="sortlist-bottom">
					<text @click="emPtv()">清空</text>
					<text @click="flag && compLete()"> 完成</text>
				</view>
			</view>
		
		</view>
		<!-- 阴影 -->
		<view class="yin" v-if="ying" @click="backClic()"> </view>
	</view>

</template>

<script>
	//引入post请求
	import {publicing} from'../../../api/api.js'
	// 引入请求地址
	import {startingurl,multipleurl} from '../../../api/request.js'
	export default{
		data() {
			return {
				synthesize:"综合排序",
				drop:false,
				sortmen:false,
				ying:false,
				num:0,
				scrnum:-1,
				flag:false,
				// 接受筛选的对象
				multiobj:{},
				sortlist: [
					{
						name:'综合排序',
						screen:"_id",
						nums:1
					},
					{
						name:'起送价最低',
						screen:"delivering",
						nums:1
					},
					{
						name:'配送费最低',
						screen:"physical",
						nums:1
					},
					{
						name:'人均高到低',
						screen:"capita",
						nums:-1
					},
					{
						name:'人均高到低',
						screen:"capita",
						nums:1
					},
				],
				// 多选
				screendata:[
					{
						"title":"商家特色(可多选)",
						"datas":[
							{"id":1,
							"sign":"duration",
							"name":"配送最快"
							},
							{"id":1,
							"sign":"deliver",
							"name":"0元起送"
							},
							{"id":1,
							"sign":"physi",
							"name":"免配送费"
							},
						]
					}
				],
				// 单选
				person:[
					{
						"title":"人均价",
						"datas":[
							{
							"name":"20元以下",
							"per":{
									"$lt":20
								}
							},
							{
							"name":"20-40元",
							"per":{
									"$lte":40,
									"$gte":20
								}
							},
							{
							"name":"40元以上",
							"per":{
									"$gt":40
								}
							},
						]
					}
					
				],
				
			}
		},
		methods:{
			// 综合排序
			multiple(){
				this.drop=true
				this.backOne()
				this.sortmen=false
			},
			// 综合排序替换
			sortClick(index,name,screen,nums){
				this.synthesize=name
				this.num=index
				console.log(screen + nums)
				this.backClic()
				this.starTing(screen,nums)
			},
			// 综合排序的请求
			starTing(screen,nums){
				let Data={
					screen,nums
				}
				publicing(startingurl,Data).then((res)=>{
					// console.log(res)
					// 存储到vuex数据仓库
					this.$store.commit('screenmuta',res.data)
				}).catch((err)=>{
					console.log(err)
				})
			},
			// 销量，津贴，速度
			saLes(){
				this.backClic()
			},
			// 筛选
			scReen(){
				this.drop=false
				this.sortmen=true
				this.backOne()
			},
			// 透明背景
			backOne(){
				setTimeout(()=>{
					this.ying=true
				},310)
			},
			// 隐藏透明背景
			backClic(){
				this.ying=false
				this.drop=false
				this.sortmen=false
			},
			// 商家特色的多选
			screenChoIce(indexs,sign){
				// console.log(indexs)
				// console.log(sign)
				// console.log(this.screendata[0].datas[indexs].id)
				if(this.screendata[0].datas[indexs].id ==1){
					// 选中
					this.screendata[0].datas[indexs].id = 2
					// console.log('选中')
					this.$set(this.multiobj,sign,sign)
					// this.$set可以给对象上添加属性
					// console.log(this.multiobj)
				}else{
					// 未选中
					this.screendata[0].datas[indexs].id = 1
					// console.log('未选中')
					this.$delete(this.multiobj,sign)
					// console.log(this.multiobj)
				}
				
			},
			// 商家特色的单选
			personchoIce(index,name){
				if(this.scrnum==index){
					// 未选中
					this.scrnum=-1
					this.$delete(this.multiobj,'capita')
					// console.log(this.multiobj)
				}else{
					// 选中
					this.scrnum=index
					this.$set(this.multiobj,'capita',name)
					// console.log(this.multiobj)
				}
			},
			// 完成
			compLete(){					
				this.backClic()
				publicing(multipleurl,this.multiobj).then((res)=>{
					console.log(res.data)
					if(res.data=="没有商品数据"){
						uni.showToast({
							title:"没有商品信息",
							icon:'none'
						})
					}
					// 存储到vuex数据仓库
					this.$store.commit('screenmuta',res.data)
				}).catch((err)=>{
					console.log(err)
				})
			},
			// 清空
			emPtv(){
				// 清空单选
				this.scrnum=-1
				// 清空多选
				this.screendata.forEach((item,index,array)=>{	
					let arr=item.datas.map((items)=>{
						items.id =1
						return items.id 
					})	
					// console.log(arr)
				})
					this.backClic()
					// console.log(this.multiobj)
					this.multiobj={}
			},
					
		},
		computed:{
			// 如果this.multiple如果是空对象，禁止点击完成按钮反之可以点击
			emptyIng(){
				let obj=JSON.stringify(this.multiobj)
				console.log(obj)
				if(obj=='{}'){
					this.flag=false
				}else{
					this.flag=true
				}
			}
			
		}
	}

</script>

<style scoped lang="less">
	// 阴影区
	.yin{
		background: rgba(0,0,0,0.5);
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
	}
	// 置顶
	.prefer-posi {
		position: absolute;
		left: 0;
		right: 0;
		width: 100%;
		z-index: 999;
		// 筛选区
		.delica-view {
			font-size: 30upx;
			display: flex;
			align-items: center;
			color: #666666;
			height: 70upx;
			padding: 0 15upx;
			background: #ffffff;

			.delica-list {
				display: flex;
				align-items: center;

				image {
					width: 30upx;
					height: 30upx;
					display: block;
				}
			}

			.delica-right {
				justify-content: flex-end;
				flex-grow: 5;
			}

			.delica-grow {
				flex-grow: 1;
			}
		}
		// 综合排序
		.sortlist{
			background: #fff;
		}
		.sortliteltle{
			text{
				padding: 0 15upx;
				display: block;
				font-size: 30upx;
				height: 70upx;
				line-height: 70upx;
				border-top: 1px solid #ededed;
			}
			.activeb{
				color: #f89903 !important;
			}
		}
		// 选择
		// 相对定位
		.sortlist-view{
			height: 700upx;
			overflow: hidden;
			overflow: scroll;
			position: relative;
			.sortlist-title{
				padding: 0 15upx;
				font-size: 30upx;
				height: 60upx;
				line-height: 60upx;		
			}
			.sortlist-flex{
				display: flex;
				flex-wrap: wrap;
				align-items: center;
				margin-bottom: 30upx;
				.Choice{
					font-size: 28upx;
					background: #F8F8F8;
					height: 55upx;
					line-height: 55upx;
					color: #666666;
					width: calc( (100% / 3 ) - 15px) !important;
					margin:7.5px ;
					text-align: center;
					display: block;
					border-radius: 5upx;
				}
				.scractive{
					background: #fef6df !important;
					color: #f29909 !important;
				}
			}
			.sortlist-bottom{
				background: #ffffff;
				height: 80upx;
				border-top: 1upx solid #e4e4e4;
				display: flex;
				justify-content: space-around;
				align-items: center;
				position: absolute;
				bottom: 0;
				left: 0;
				right: 0;
				text{
					flex-grow: 1;
					height: 80upx;
					line-height: 80upx;
					text-align: center;
				}
				text:nth-child(1){
					border-right: 1upx solid #e4e4e4;
				}
				text:nth-child(2){
					background: #ffd348;
				}
			}
		}
	}
</style>
